<template>
  <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" class="edit"></quill-editor>
</template>

<script>
import { quillEditor,Quill } from "vue-quill-editor";
//设置字体大小
let fontSizeStyle=Quill.import('attributors/style/size') //引入这个后会把样式写在style上
    fontSizeStyle.whitelist=['45px','60px','90px']
    Quill.register(fontSizeStyle,true)

//设置字体样式
let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
    let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']
    Font.whitelist = fonts //将字体加入到白名单
    Quill.register(Font, true)
import {addQuillTitle} from '@/plugin/quill-title'
export default {
  data () {
    return {
      //富文本内容
      content: "",
      editorOption: {
        //   配置工具栏
      }
    }
  },
  mounted() {
    addQuillTitle() 
  }
}
</script>

<style scoped>
/* /deep/.ql-container{
    height: 150px;
 } */
 .quill-editor >>> .ql-container {
  min-height: 150px;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='45px']::before, 
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {
    content: '45px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='60px']::before, 
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='60px']::before {
    content: '60px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='90px']::before, 
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='90px']::before {
    content: '90px';
}
</style>